<template>
  <div class="MusicHeader iconfont">
    <div class="MusicHeader-left">
      <div class="logo">
        <div>&#xe507;</div>
        <h3>网易云音乐</h3>
      </div>
      <div class="search">
        <span class="back" @click="goBack">&#xe501;</span>
        <span class="next" @click="goNext">&#xe50e;</span>
        <div><input type="text" placeholder="搜索" /></div>
        <span>&#xe698;</span>
      </div>
    </div>

    <div class="MusicHeader-right">
      <div>
        <ul>
          <li>
            <div><img :src="avatarUrl" alt="" /></div>
          </li>
          <li class="vip flex">
            <router-link to="/login" v-if="!isTrue"
              ><h6>未登录</h6></router-link
            >
            <h6 class="login" v-if="isTrue">
              {{ $route.params.nickname || nickname }}
            </h6>
            <span v-if="isTrue">&#xe6d9;</span>
            <div v-if="!isTrue">开通vip</div>
          </li>
          <router-view name="Login" />
          <li class="theme">&#xe62e;</li>
          <li>&#xe606;</li>
          <li>&#xe857;</li>
          <li>&#xe6e2;</li>
        </ul>
      </div>
      <div class="flex">
        <div>&#xe506;</div>
        <div>&#xe634;</div>
        <div>&#xebab;</div>
      </div>
    </div>
  </div>
</template>

<script>
import API from "../../library/axios/api";
import "../../library/axios/instance";
export default {
  name: "MusicHeader",
  data() {
    return {
      imgUrl: require("../../assets/avatar.jpg"),
      nickname: undefined,
    };
  },
  computed: {
    isTrue() {
      return this.nickname || this.$route.params.nickname;
    },
    avatarUrl() {
      if (this.$route.params.avatarUrl) {
        return this.$route.params.avatarUrl;
      } else return this.imgUrl;
    },
  },
  watch: {
    avatarUrl() {
      this.updateLogin();
    },
  },
  methods: {
    updateLogin() {
      if (localStorage.id)
        API.user.detail({ uid: localStorage.id }).then((res) => {
          console.log(res);
          this.imgUrl = res.profile.avatarUrl;
          this.nickname = res.profile.nickname;
        });
    },
    goBack() {
      this.$router.back();
    },
    goNext() {
      this.$router.forward();
    },
  },
  mounted() {
    this.updateLogin();
  },
};
</script>

<style lang="scss" scoped>
@import "./MusicHeader.scss";
</style>